// 路由模块：集中管理页面导航
// 说明：这是使用 vue-router 的基础配置文件，导出一个路由实例供 main.js 挂载
// 学习重点：
// 1) 路由即为“页面”之间的导航规则
// 2) 每个路由对象主要包含 path（路径）、name（名称）、component（页面组件）
// 3) createWebHistory 使用浏览器原生的 History API，URL 更干净

import { createRouter, createWebHistory } from 'vue-router'

// 使用路由懒加载（按需加载页面）
// 懒加载解释：只有当用户访问对应页面时，才加载该页面的代码，提高首屏速度
// 写法解读：() => import('...') 是一个函数，调用时才进行动态导入
const Home = () => import('../views/Home.vue')
const Posts = () => import('../views/Posts.vue')
const PostDetail = () => import('../views/PostDetail.vue')
const About = () => import('../views/About.vue')

// 路由表：把“路径”和“页面组件”关联起来
export const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/posts', name: 'Posts', component: Posts },
  // 动态路由：:id 是一个占位符，匹配 /posts/1、/posts/abc 等不同文章 ID
  { path: '/posts/:id', name: 'PostDetail', component: PostDetail },
  { path: '/about', name: 'About', component: About },
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes,
  // 可选：滚动行为，让页面切换时滚动到顶部
  scrollBehavior() {
    return { top: 0 }
  },
})

export default router
